<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <!-- @click="showAddDialog(1, '0')" 参数1的 1 指的是添加的几级权限，参数2的 '0' 指的是父级 pid 是 0 -->
          <el-button type="primary" size="small" @click="showAddDialog(1, '0')">添加权限</el-button>
        </div>

        <el-table
          :data="permissionList"
          row-key="id"
          default-expand-all
          :row-class-name="tableSonRowLight"
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="scope">
              <!-- 参数1的 type 的值是2，代表二级权限，参数2 的 id 是当前行的 id 值，作为 pid 传给添加弹框组件，表示在当前的id下添加 -->
              <!-- :disabled="scope.row.type===2" 该项目只做一级二级权限，因此二级权限下的添加按钮不可用 -->
              <el-button size="small" type="text" :disabled="scope.row.type===2" @click="showAddDialog(2, scope.row.id)">添加权限点</el-button>
              <el-button size="small" type="text" @click="showEditDialog(scope.row.id)">修改</el-button>
              <el-button size="small" type="text" @click="delPermission(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 新增权限弹框 -->
      <AddPermission
        :is-show-add-dialog.sync="isShowAddDialog"
        :add-type="addType"
        :add-pid="addPid"
        @getPermissionList="getPermissionList"
      />

      <!-- 修改权限弹框 -->
      <EditPermission
        :is-show-edit-dialog.sync="isShowEditDialog"
        :edit-id="editId"
        @getPermissionList="getPermissionList"
      />
    </div>
  </div>
</template>

<script>
import { getPermissionListRequest, delPermissionRequest } from '@/api/permission'
// 对数据进行树状处理
import { tranListToTreeData } from '@/utils/index'
// 新增权限弹框
import AddPermission from './components/add-permission.vue'
// 修改权限弹框
import EditPermission from './components/edit-permission.vue'

export default {
  name: 'Permission',
  components: {
    AddPermission,
    EditPermission
  },

  data() {
    return {
      // 权限列表
      permissionList: [],

      // 与添加弹框子组件相关：
      // 是否展示添加权限弹框
      isShowAddDialog: false,
      // 类型标记了一级(页面访问权) 二级(按钮操作权)
      addType: 0,
      // 添加到哪个节点下
      addPid: '',

      // 与修改弹框子组件有关：
      isShowEditDialog: false,
      editId: ''
    }
  },

  created() {
    this.getPermissionList()
  },

  methods: {
    // 获取权限列表：
    async getPermissionList() {
      const { data } = await getPermissionListRequest()
      // 进行数据的树形处理
      this.permissionList = tranListToTreeData(data, '0')
    },

    // 子级会显示高亮
    tableSonRowLight({ row, rowIndex }) {
      if (row.pid !== '0') return 'son-row'
      else return ''
    },

    // 点击显示添加权限弹框：
    // 参数1 指的是添加的几级权限，参数2 指的是父级 pid 是多少
    // pid，指在哪个下面添加，一级就是'0' 二级就是当前的id作为添加项的pid
    showAddDialog(type, pid) {
      // 打开弹框
      this.isShowAddDialog = true
      // 传值给子级
      this.addType = type
      this.addPid = pid
    },

    // 删除:
    delPermission(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除：
        await delPermissionRequest(id)
        this.$message.success('删除成功')
        // 重新渲染页面：
        this.getPermissionList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 点击显示修改权限弹框：
    showEditDialog(id) {
      this.isShowEditDialog = true
      this.editId = id
    }
  }
}
</script>

<style>
.el-table .son-row {
  background: #f5fcf2;
}
</style>
